Cascade Layers

前提として「ある要素に複数のstyle指定があった時にどれを優先するか」という話をしている

ペイントソフトの「レイヤー機能」みたいなイメージ

特定のlayerの中にCSSを記述して、

layer同士の順序を入れ替えることで、適用するstyleを入れ替えたり

layerをコメントアウトすれば、そのstyleが非表示になる

2021/10の時点でexperimentalで利用可能

2つのlayerを定義して簡単に入れ替えている例

code:html

<p>hello world</p>

code:css

/* layerの適用順序を宣言 */

@layer main;

@layer second;

/* mainとsecondという名前のlayerを定義 */

@layer main {

p { color: blue; }

}

@layer second {

p { color: green; }

}

https://i.gyazo.com/28416ab72c60adf923d1200daf6873a6.gif

同じ要素に対するstyleをしているlayerが複数ある時に、

何が嬉しいのか

複数のCSSファイルだったり、外部のCSSを使用する際に、適用順序を楽に制御できる

そのため、Cascade Layers以前は、コンフリクトした場合に大幅に記述を修正する必要があった

3種類の記法

各layerの内容を定義する

1つだと嬉しさがないので

code:css

@layer layer_name1 {

p { .. }

}

code:css

@layer layer_name2 {

p { .. }

}

1ファイルの中で複数定義することもあれば、別ファイルに分けて定義することもある

code:css

@import url("ui-library.css") layer(lib);

定義済みのlayerを、順序を意識して適用する

code:css

@layer layer_name2;

@layer layer_name1;

下に書いたもののほうが優先順位が高くなる

これは以下のように書いても同じ

code:css

@layer layer_name2, layer_name1;

ちなみに、以下2つは同じ意味になる

code:1.css

@layer layer_name2, layer_name1;

@layer layer_name1 {

p { .. }

}

@layer layer_name2 {

p { .. }

}

code:2.css

@layer layer_name2 {

p { .. }

}

@layer layer_name1 {

p { .. }

}

👀 Meanwhile, the latest Chrome Canary includes layer-inspecting dev tools. Click on a layer name, or that little layer icon to see a list of all the layers involved, and their stacking order.

https://pbs.twimg.com/media/FNB3CHpVUAIfWHf.jpg

とはいえ、Reactなどのlibraryを使っている範囲ではあまり関係なさそうか？

libraryが内包してくれているだけで、恩恵は受けているかもしれない

code:css

@layer framework {

.hoge { color: red }

@layer base {

.hoge { color: green }

}

@layer custom {

.hoge { color: blue }

}

}